<template>
  <div>
    <Card>
      <Tabs v-model="searchForm.resourceType" @on-click="handleSearch">
        <TabPane v-for="(i, k) in typeList" :key="k" :label="i.label" :name="i.value" />
      </Tabs>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          @submit.native.prevent
          inline
          :label-width="70"
          class="search-form"
        >
          <Form-item label="会员名称" prop="memberName">
            <Input
              type="text"
              v-model="searchForm.memberName"
              placeholder="请输入会员名称"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Button
            @click="handleSearch"
            type="primary"
            class="search-btn"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        ref="table"
        class="mt_10"
      >
        <template slot-scope="{ row }" slot="action">
          <Button type="info" size="small" style="margin-right: 5px" @click="info(row)"
            >查看</Button
          >
          <Button type="error" size="small" @click="remove(row)">删除</Button>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <!-- 评价详情 -->
    <Modal v-model="infoFlag" width="800" :title="infoTitle">
      <div
        class="info-list"
        v-if="searchForm.resourceType == 'GOODS'"
        style="overflow: hidden"
      >
        <div class="left-container">
          <div class="product">
            <img class="img" :src="infoData.goodsImage" />
          </div>
          <div class="show">
            <label>页面展示：</label>
            <i-switch
              size="large"
              true-value="OPEN"
              false-value="CLOSE"
              v-model="infoData.status"
              @on-change="changeSwitchView"
              style="margin-top: 3px"
            >
              <span slot="open">展示</span>
              <span slot="close">隐藏</span>
            </i-switch>
          </div>
        </div>
        <div class="right-container">
          <div class="border-b">{{ infoData.goodsName }}</div>
          <div class="border-b">
            <div class="div-height">店铺名称：{{ infoData.storeName }}</div>
            <div class="div-height">订单号：{{ infoData.orderNo }}</div>
          </div>

          <div class="border-b">
            <List>
              <ListItem>
                <ListItemMeta
                  :avatar="infoData.memberProfile"
                  :title="infoData.memberName"
                  :description="infoData.content"
                />
              </ListItem>
              <div class="score-content">
                <span>物流评分：{{ infoData.deliveryScore }}</span>
                <span>服务评分：{{ infoData.serviceScore }}</span>
                <span>描述评分：{{ infoData.descriptionScore }}</span>
              </div>
              <div class="" v-if="infoData.haveImage">
                评价图
                <div style="margin-left: 40px">
                  <template v-if="infoData.images && infoData.images.length">
                    <img
                      style="width: 100px; height: 110px; margin-left: 2px"
                      v-for="(img, index) in infoData.images.split(',')"
                      :src="img"
                      alt=""
                      :key="index"
                    />
                  </template>
                </div>
              </div>
            </List>
          </div>
          <div class="border-b" v-if="infoData.reply">
            <div>
              <div>
                <div style="float: left">商家回复：</div>
                <div style="margin-left: 60px">{{ infoData.reply }}</div>
              </div>
              <div v-if="infoData.haveReplyImage">
                <div style="margin-left: 60px">
                  <template v-if="infoData.replyImage && infoData.replyImage.length">
                    <img
                      style="width: 100px; height: 110px"
                      v-for="(img, index) in infoData.replyImage.split(',')"
                      :key="index"
                      :src="img"
                      alt=""
                    />
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-list" v-else style="overflow: hidden">
        <div class="left-container">
          <div class="product">
            <img class="img" :src="infoData.resourceCover" />
          </div>
          <div class="show">
            <label>页面展示：</label>
            <i-switch
              size="large"
              :true-value="false"
              :false-value="true"
              true-color="#FF5C58"
              v-model="infoData.deleteFlag"
              @on-change="changeOther"
              style="margin-top: 3px"
            >
              <span slot="open">展示</span>
              <span slot="close">隐藏</span>
            </i-switch>
          </div>
        </div>
        <div class="right-container">
          <div class="border-b">
            <div class="div-height">{{ typeName }}名称：{{ infoData.resourceName }}</div>
            <div class="div-height">订单号：{{ infoData.orderSn || "无" }}</div>
          </div>
          <div class="border-b">
            <div class="div-height">
              {{ typeName }}评分：<Rate disabled v-model="infoData.grade" />
            </div>
            <div class="div-height">
              {{ typeName }}评价：{{ infoData.content || "无" }}
            </div>
            <div class="div-height" v-if="infoData.imgUrl">
              评价图：
              <div style="margin-left: 40px">
                <template v-if="infoData.imgUrl && infoData.imgUrl.length">
                  <img
                    style="width: 100px; height: 110px; margin-left: 2px"
                    v-for="(img, index) in infoData.imgUrl.split(',')"
                    :src="img"
                    :key="index"
                  />
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Member from "@/api/member";

export default {
  name: "goods-review", // 会员评价
  data() {
    return {
      typeList: [
        { label: "商品", value: "GOODS" },
        { label: "课程", value: "COURSE" },
        { label: "专家", value: "EXPERT" },
        { label: "基地", value: "TRAINING_BASE" },
      ],
      infoData: {}, // 商品信息
      infoFlag: false, // 评价展示
      infoTitle: "", // modal名称
      loading: true, // 表单加载状态
      searchForm: {
        // 搜索框初始化对象
        resourceType: "", // 类型
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        memberName: "", // 会员名称
      },
      columns: [],
      data: [], // 表单数据
      total: 0, // 表单数据总数
    };
  },
  computed: {
    typeName() {
      let t = this.searchForm.resourceType;
      let label = "";
      if (t == "GOODS") label = "商品";
      if (t == "COURSE") label = "课程";
      if (t == "EXPERT") label = "专家";
      if (t == "TRAINING_BASE") label = "基地";
      return label;
    },
  },
  watch: {
    "searchForm.resourceType": {
      handler(v) {
        let list = [];
        if (v == "GOODS") {
          list = [
            // 表头
            {
              title: "商品名称",
              key: "goodsName",
              minWidth: 120,
              align: "left",
              tooltip: true,
            },
            {
              title: "会员名称",
              key: "memberName",
              minWidth: 120,
              align: "left",
              tooltip: true,
            },
            {
              title: "评价",
              key: "grade",
              align: "left",
              width: 90,
              render: (h, params) => {
                if (params.row.grade == "GOOD") {
                  return h("Tag", { props: { color: "green" } }, "好评");
                } else if (params.row.grade == "MODERATE") {
                  return h("Tag", { props: { color: "orange" } }, "中评");
                } else {
                  return h("Tag", { props: { color: "red" } }, "差评");
                }
              },
            },
            {
              title: "物流评分",
              key: "deliveryScore",
              render: (h, params) => {
                return h("div", params.row.deliveryScore || 5 + "星");
              },
            },
            {
              title: "服务评分",
              key: "deliveryScore",
              render: (h, params) => {
                return h("div", params.row.serviceScore || 5 + "星");
              },
            },
            {
              title: "描述评分",
              key: "deliveryScore",
              render: (h, params) => {
                return h("div", params.row.descriptionScore || 5 + "星");
              },
            },
            {
              title: "评价时间",
              key: "createTime",
              align: "center",
              width: 170,
            },
            {
              title: "页面展示",
              key: "shopDisable",
              align: "center",
              width: 100,
              render: (h, params) => {
                let _this = this;
                return h("div", {}, [
                  h("i-switch", {
                    props: {
                      value: params.row.status,
                      trueValue: "OPEN",
                      falseValue: "CLOSE",
                      size: "large",
                      trueColor: "#FF5C58",
                      beforeChange() {
                        return new Promise((resolve, reject) => {
                          this.$Modal.confirm({
                            title: `确认${params.row.status == "OPEN" ? "隐藏" : "显示"}`,
                            content: `是否${
                              params.row.status == "OPEN" ? "隐藏" : "显示"
                            }该条评论？`,
                            onOk: () => {
                              let query = {
                                status: params.row.status == "OPEN" ? "CLOSE" : "OPEN",
                              };
                              API_Member.updateMemberReview(params.row.id, query)
                                .then((res) => {
                                  if (res.code == 200) {
                                    _this.$Message.success(res.message);
                                    resolve();
                                  } else {
                                    _this.$Message.success(res.message);
                                    reject();
                                  }
                                })
                                .catch(() => {
                                  reject();
                                });
                            },
                          });
                        }).then(() => {
                          _this.checkSearch();
                        });
                      },
                    },
                    scopedSlots: {
                      open: () => h("span", "显示"),
                      close: () => h("span", "隐藏"),
                    },
                  }),
                ]);
              },
            },
            {
              title: "操作",
              slot: "action",
              width: 150,
              align: "center",
              fixed: "right",
            },
          ];
        } else {
          list = [
            // 表头
            {
              key: "resourceName",
              minWidth: 120,
              align: "left",
              tooltip: true,
              renderHeader: (h) => {
                return h("div", this.typeName + "名称");
              },
            },
            { title: "会员名称", key: "nickName", align: "left", tooltip: true },
            {
              title: "评价",
              align: "left",
              render: (h, params) => {
                if (params.row.grade == 4 || params.row.grade == 5) {
                  return h("Tag", { props: { color: "green" } }, "好评");
                } else if (params.row.grade == 2 || params.row.grade == 3) {
                  return h("Tag", { props: { color: "orange" } }, "中评");
                } else {
                  return h("Tag", { props: { color: "red" } }, "差评");
                }
              },
            },
            { title: "评分", key: "grade" },
            { title: "评价时间", key: "createTime", align: "center" },
            {
              title: "页面展示",
              align: "center",
              render: (h, params) => {
                let _this = this;
                return h("div", {}, [
                  h("i-switch", {
                    props: {
                      value: params.row.deleteFlag,
                      trueValue: false,
                      falseValue: true,
                      size: "large",
                      trueColor: "#FF5C58",
                      beforeChange() {
                        return new Promise((resolve, reject) => {
                          this.$Modal.confirm({
                            title: `确认${params.row.deleteFlag ? "显示" : "隐藏"}`,
                            content: `是否${
                              params.row.deleteFlag ? "显示" : "隐藏"
                            }该条评论？`,
                            onOk: () => {
                              API_Member.updatePageReview(
                                params.row.id,
                                _this.searchForm.resourceType
                              )
                                .then((res) => {
                                  if (res.code == 200) {
                                    _this.$Message.success(res.message);
                                    resolve();
                                  } else {
                                    _this.$Message.success(res.message);
                                    reject();
                                  }
                                })
                                .catch(() => {
                                  reject();
                                });
                            },
                          });
                        }).then(() => {
                          _this.checkSearch();
                        });
                      },
                    },
                    scopedSlots: {
                      open: () => h("span", "显示"),
                      close: () => h("span", "隐藏"),
                    },
                  }),
                ]);
              },
            },
            {
              title: "操作",
              slot: "action",
              width: 150,
              align: "center",
              fixed: "right",
            },
          ];
        }
        this.columns = list;
      },
      deep: true,
    },
  },
  methods: {
    // 切换查看switch
    changeSwitchView(val) {
      let status = val;
      API_Member.updateMemberReview(this.infoData.id, { status }).then((res) => {
        if (res.code == 200) {
          this.$Message.success("修改成功!");
          this.checkSearch();
        }
      });
    },
    // 切换显示
    changeOther() {
      API_Member.updatePageReview(this.infoData.id, this.searchForm.resourceType).then(
        (res) => {
          if (res.code == 200) {
            this.$Message.success("修改成功!");
            this.checkSearch();
          }
        }
      );
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.checkSearch();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = v;
      this.checkSearch();
    },
    // 搜索
    handleSearch() {
      this.data = [];
      this.searchForm.pageNumber = 1;
      this.checkSearch();
    },
    // 判断查询
    checkSearch() {
      if (this.searchForm.resourceType == "GOODS") {
        this.getGoodsList();
      } else {
        this.getDataList();
      }
    },
    // 获取列表
    getGoodsList() {
      this.loading = true;
      API_Member.getMemberReview(this.searchForm)
        .then((res) => {
          if (res.code == 200) {
            this.data = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取其它评价
    getDataList() {
      let params = Object.assign({}, this.searchForm);
      params.evaluationType = 0;
      this.loading = true;
      API_Member.getPageReview(params)
        .then((res) => {
          if (res.code == 200) {
            this.data = res.result.list;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //评价详情
    info(v) {
      if (this.searchForm.resourceType == "GOODS") {
        this.infoTitle = `用户${v.memberName}的评价详情`;
        API_Member.getMemberInfoReview(v.id).then((res) => {
          if (res.code == 200) {
            this.infoData = res.result;
            this.infoFlag = true;
          }
        });
      } else {
        this.infoTitle = `用户${v.nickName}的评价详情`;
        API_Member.getEvaluateDetail(v.id, this.searchForm.resourceType).then((res) => {
          if (res.code == 200) {
            this.infoData = res.result;
            this.infoFlag = true;
          }
        });
      }
    },
    // 删除评论
    remove(v) {
      const type = this.searchForm.resourceType;
      this.$Modal.confirm({
        title: "确认删除",
        content: `您确认要删除会员${type == "GOODS" ? v.memberName : v.nickName}的评论?`,
        loading: true,
        onOk: () => {
          if (type == "GOODS") {
            API_Member.delMemberReview(v.id).then((res) => {
              this.$Modal.remove();
              this.$Message.success(res.message);
              this.checkSearch();
            });
          } else {
            API_Member.delPageReview(v.id, this.searchForm.resourceType).then((res) => {
              if (res.code == 200) {
                this.$Modal.remove();
                this.$Message.success(res.message);
                this.checkSearch();
              }
            });
          }
        },
      });
    },
  },
  mounted() {
    this.searchForm.resourceType = "GOODS";
    this.checkSearch();
  },
};
</script>
<style lang="scss" scoped>
.left-container {
  float: left;
}

.right-container {
  float: left;
  margin-left: 50px;
}

.img {
  width: 100%;
  height: 100%;
}
img {
  vertical-align: middle;
  border-style: none;
}
.product {
  width: 140px;
  height: 160px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
}
.show {
  label {
    font-size: 14px;
  }
  margin-top: 15px;
}

label {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  display: block;
  float: left;
  margin-right: 2px;
}
.border-b {
  border-bottom: 1px solid #e9e9e9;
  width: 500px;
  overflow: hidden;
  position: relative;
  margin-top: 12px;
}
.div-height {
  line-height: 25px;
}
.score-content {
  margin: 5px 0;
  span {
    margin-right: 20px;
  }
}
</style>
